<script setup lang="ts">
import { AnswerItem, Question } from "../../index.d.ts";
import { ref } from "vue";

const props = defineProps<{ xz: Question; index: number }>();
const emit = defineEmits(["hasAnswer"]);

const answerItem = ref<AnswerItem>({
  questionID: props.xz.id,
  content: "",
  type: props.xz.type,
});
</script>

<template>
  <div class="question-title">
    {{ index + 1 }}. {{ xz.title }}
    <!-- <span class="text-red-600">(本题的难度为{{ xz.difficulty }})</span> -->
  </div>
  <div class="flex question-content">
    <el-radio-group
      v-model="answerItem.content"
      @change="() => emit('hasAnswer', answerItem)"
    >
      <el-radio :label="1">A. {{ xz.choice1 }}</el-radio>
      <el-radio :label="2">B. {{ xz.choice2 }}</el-radio>
      <el-radio :label="3">C. {{ xz.choice3 }}</el-radio>
      <el-radio :label="4">D. {{ xz.choice4 }}</el-radio>
    </el-radio-group>
  </div>
</template>

<style scoped></style>
